<template>
  <div>
    商品分类
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <span><!-- card title --></span>
      </div>
      <el-table :data="categoryList" border stripe row-key="id" :tree-props="{children: 'abc', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="name"
          label="菜单名称"
        />
        <el-table-column
          label="图标"
        >
          <template slot-scope="scope">
            <img width="80" height="80" :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="分类名称"
        />
        <el-table-column
          prop="sort"
          label="排序"
        />
        <el-table-column
          prop="sort"
          label="显示状态"
        >
          <template slot-scope="scope">
            <div> {{ scope.row.showStatus === 1?'显示':'不显示' }} </div>

          </template>
          <el-table-column
            prop="sort"
            label="导航栏展示"
          >
            <template slot-scope="scope">
              <div> {{ scope.row.navStatus === 1?'展示':'不展示' }} </div>

            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
          />
        </el-table-column></el-table>
    </el-card>

  </div>
</template>
<script>
import { getAllCategory as getAllCategoryApi } from '@/api/product'
export default {
  name: 'Category',
  mixins: [],
  data() {
    return {
      categoryList: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getAllCategory()
  },
  mounted() {
  },
  methods: {
    async getAllCategory() {
      const res = await getAllCategoryApi()
      // this.categoryList = res.data.items
      res.data.items.forEach(item => {
        this.categoryList.push({
          ...item.category,
          abc: item.children
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
